<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/glp1.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/glp1.js"></script>
    <title>盖洛普测试题</title>
</head>
<body>  
    <div class="body_bg">
        <!-- 职业优势测评 -->
        <div class="glp_head">
            <div class="glp_head_title">职业优势测评</div>
        </div>
        <!-- 答题卡 -->
        <div class="blp_answer_body">
            <div class="blp_answer_title">第<span id="answNum">1</span>题 <span class="dx">(单选题)</span></div>
            <!-- 题1 -->
            <div class="answer" id="answer-top">我相信一见钟情</div>
            <!-- 选项 -->
            <div class="blp_answer_con">
                <div class="blp_answer_left mt-2">
                    <div class="top_arrows">
                        <img src="image/top.png">
                    </div>
                    <div class="top_arrows mt-4">
                        <img src="image/down.png">
                    </div>
                </div>
                <div class="blp_answer_right">
                    <ul class="blp_answer">
                        <li class="qa">
                            <div class="blp_radio">
                                <input type="radio" class="blp_rad" name="a">
                            </div>
                        </li>
                        <li class="qb">
                            <div class="blp_radio">
                                <input type="radio" class="blp_rad" name="a">
                            </div>
                        </li>
                        <li class="qc">
                            <div class="blp_radio">
                                <input type="radio" class="blp_rad" name="a">
                            </div>
                        </li>
                        <li class="qd">
                            <div class="blp_radio">
                                <input type="radio" class="blp_rad" name="a">
                            </div>
                        </li>
                        <li class="qe">
                            <div class="blp_radio">
                                <input type="radio" class="blp_rad" name="a">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 题2 -->
            <div class="answer" id="answer-bot">我喜欢日久生情</div>
            <!-- 下一题 -->
            <div class="next_answer" onclick="nextAnswer()">下一题</div>
            <!-- 倒计时 -->
            <div class="answer_time">
                <!-- 倒计时 -->
                <div class="timeout">剩余时间:<span id="remainTime">30分</span></div>
                <!-- 当前进度 -->
                <div class="pro">当前进度:<span class="myprogress" id="mypro-num">1</span>/186</div>
                <!-- 进度条 -->
                <div class="por_box">
                    <div class="pro_crcle"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</body>
<script>

    // 
    var QuestionJosn=[
        {
            "questionId":"1",
            "questionA":"愿意吗",
            "questionB":"不愿意吗",
        },
        {
            "questionId":"2",
            "questionA":"愿意吗1111",
            "questionB":"不愿意吗2222",
        },
    ];
    var question = QuestionJosn;
    let questions = question.map((val,index)=>{
        let querJson = {}
        querJson.top = val.questionA
        querJson.bot = val.questionB
        querJson.id = val.questionId
        return querJson
    })
    console.log(questions.length)

    // $("#answer-top").text(questions[0].bot)
        // 
    var testNum = 1;
    function nextAnswer(){
        console.log (questions.length)

        testNum = testNum+1
        if(testNum<=186){
            $(".pro_crcle").css("left",testNum)
            $("#mypro-num").text(testNum)
            $("#answNum").text(testNum)
        }else{
            alert("已经没有题目了哦")
            $(".next_answer").text("交卷")
        }
    }

</script>
</html>